<template>
  <PageLayout full :page-style="pageStyle">
    <!--头部导航-->
    <template #header>
      <HeaderLayout show-back>
        <view>技能中心</view>
      </HeaderLayout>
    </template>
    <PageLayout safe-area="none">
      <!--头部导航-->
      <template #header>
        <view class="nav-bar">
          <view v-for="(item, index) in navBarTitles" @click="changeTab(index)" class="nav-cell">
            <view class="nav-title" :style="chooseIndex === index ? selectStyle : opacityStyle">{{ item }}</view>
            <view :style="chooseIndex === index ? blackStyle : pageStyle" class="nav-line"></view>
          </view>
        </view>
      </template>
      <scroll-view class="scrollContBox" scroll-y>
        <!--无数据展示-->
        <view class="no-data" v-if="skillData?.length === 0">
          <image class="na-data-image" :src="netconfig.ASSETS_IMGURL + 'img_message_empty.png'"></image>
          <view class="no-data-text">没有数据～</view>
        </view>
        <!--数据列表-->
        <view class="cell" v-else v-for="skill in skillData">
          <view class="title">“{{ skill.skillContext }}”</view>
          <view class="des">{{ skill.skillTitle }}</view>
        </view>
      </scroll-view>
    </PageLayout>
  </PageLayout>
</template>
<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'
import { onLoad } from '@dcloudio/uni-app'
import type { SkillModel } from '@/api/hvn'
import { getVoiceList } from '@/api/hvn'
import { TrackType, trackEvent } from '@/dataReport/tracks'
import netconfig from '@/config/netconfig'
const navBarTitles = ['智能控制', '家务知识', '快速指导', '功能说明']
const navButtonIds = ['HVN.Skill.Tab.Smart', 'HVN.Skill.Tab.Knowledge', 'HVN.Skill.Tab.Guide', 'HVN.Skill.Tab.Function']

const pageStyle = {
  backgroundColor: '#FFFFFF',
}
const blackStyle = {
  backgroundColor: '#2D3746',
}
const opacityStyle = {
  opacity: 0.6,
}
const selectStyle = {
  opacity: 1.0,
}

let haId = ''

const chooseIndex = ref(0)
const skillData = ref<SkillModel[] | null>([])

onLoad((options) => {
  haId = options?.haId
  getSkillList()
})

/**获取对应类别下的语音内容 */
async function getSkillList() {
  let res = await getVoiceList(chooseIndex.value, 1, 20)
  if (skillData.value && skillData.value?.length > 0) {
    skillData.value.splice(0, skillData.value?.length)
  }
  skillData.value = res.data
}

/**
 * 切换tab
 * @param index
 */
function changeTab(index: number) {
  trackEvent('switch_hvn_skill_tab', {}, TrackType.ApplianceDetail, navButtonIds[index])
  chooseIndex.value = index
  getSkillList()
}
</script>

<style lang="less">
.nav-bar {
  margin: 32rpx 0rpx;
  height: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  .nav-cell {
    width: 176rpx;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 32rpx;
    /* Primary/Petrol */
    color: #2d3746;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .nav-title {
      opacity: 0.6;
    }
  }
  .nav-line {
    width: 68rpx;
    height: 4rpx;
    background: #2d3746;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
    margin-top: 8rpx;
  }
}

.scrollContBox {
  height: 100%;
  width: 100%;
  .cell {
    height: 128rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 32rpx 32rpx 24rpx 32rpx;
    background: #f4f4f6;
    .title {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 500;
      font-size: 28rpx;
      color: #2d3746;
      margin-left: 24rpx;
      margin-right: 24rpx;
      height: 32rpx;
      margin-bottom: 10rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 90%;
    }
    .des {
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 24rpx;
      /* Primary/Petrol */
      color: #2d3746;
      opacity: 0.8;
      margin-left: 24rpx;
      height: 40rpx;
    }
  }
}
.scrollContBox :nth-child(1) {
  margin-top: 0rpx;
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  .no-data-image {
    width: 275px;
    height: 428rpx;
  }
  .no-data-text {
    font-size: 28rpx;
    margin-top: 48rpx;
    color: rgba(45, 55, 70, 1);
  }
}
</style>
